<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>象漾-邀您注册</title>

<link href="#(contextPath)/assets/front/web/css/layer.css"
	rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"
	rel="stylesheet">
</head>
<style>
body {
	background-color: #e43c3c;
}

.wrapper {
	background-color: white;
	padding: 10px;
	border-radius: 5px;
}

.logo {
	text-align: center;
	margin-bottom: 10px;
	margin-top: 10px;
}

.btn-danger {
	background-color: #e43c3c;
	border-color: #e43c3c;
}

.authcode{
	width:40%;
	margin-right:5px;
}

.authWrapper{
	display:inline-flex;
}
</style>


<body>
	<div class="container">
		<div class="logo">
			<img src="#(contextPath)/assets/front/img/icon_120.png"
				width="80">
		</div>
		<div class="wrapper">
			<form>
				<div class="form-group">
					<label for="mobile">手机号</label> <input type="text" maxlength="11"
						 class="form-control" id="mobile"
						placeholder="请输入注册手机号...">
				</div>
				<div class="form-group">
					<label for="password">登录密码</label> <input type="password"
						maxlength="30"class="form-control" id="password"
						placeholder="请输入登录密码...">
				</div>

				<div class="form-group">
					<label for="confirmPass">确认密码</label> <input type="password"
						maxlength="30" class="form-control"
						id="confirmPass" placeholder="请输入确认密码...">
				</div>
				<div class="form-group">
					<label for="authcode">验证码</label> 
					<div class="authWrapper">
						<div class="authcode">
							<input type="text" maxlength="6"
							 class="form-control " id="authcode"
							placeholder="请输入验证码...">
						</div>
						<input type="button" id="authCodeBtn" class="btn btn-success" value="获取验证码"/>
					</div>
				</div>
				<button id="register" type="button" class="btn btn-danger btn-block">立即注册</button>
			</form>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script src="#(contextPath)/assets/front/web/script/layer.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

	<script>
		$(document).ready(function() {
			$("#register").click(function() {
				var mobile = $("#mobile").val().trim();
				if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(mobile))) {
					layer.msg("请输入正确的手机号码格式");
					return false;
				}
				var password = $("#password").val().trim();
				if (!(/^[a-zA-Z0-9_]{6,20}$/).test(password)) {
					layer.msg("输入登录密码格式不正确，请输入最小6位字符,如:abc123");
					return false;
				}
				
				var confirmPass = $("#confirmPass").val().trim();
				if (!(/^[a-zA-Z0-9_]{6,20}$/).test(confirmPass)) {
					layer.msg("输入确认密码格式不正确，请输入最小6位字符,如:abc123");
					return false;
				}

				
				if (confirmPass != password) {
					layer.msg("两次密码输入不一致");
					return false;
				}

				var authcode = $("#authcode").val().trim();
				if (authcode.length == 0) {
					layer.msg("请输入验证码");
					return false;
				}

				$.ajax({
					url : "#(contextPath)/api/inviteReg",
					type : 'POST',
					dataType : 'json',
					data : {
						"mobile" : mobile,
						"password" : password,
						"confirmPass" : confirmPass,
						"authCode" : authcode,
						"code" : "#(code??'')"
					},
					success : function(data) {
						if (data.result) {
							layer.alert("注册成功,请用手机搜索象漾APP，开启你的奇妙之旅吧！！")
						} else {
							layer.alert(data.msg);
							$("#mobile").val("");
							$("#password").val("");
							$("#confirmPass").val("");
							$("#authcode").val("");
						}
					}
				})

			})
			
			var wait=10;
			function time(o){
				if (wait==0) {
					o.removeAttr("disabled");    
					o.val("获取验证码")
			        wait=60;
			    }else{
			    	o.attr("disabled", true);
			    	o.val(wait+"秒后重新获取")
			        wait--;
			        setTimeout(function(){
			            time(o)
			        },1000)
			    }
			}
			
			$("#authCodeBtn").click(function(){
				var mobile=$("#mobile").val();
				if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(mobile))) {
					layer.msg("请输入正确的手机号码格式");
					return false;
				}
				time($("#authCodeBtn"));
				
				$.ajax({
			        url:"#(contextPath)/passport/sendAuthcode",
			        type:"post",
			        data:{"mobile":mobile},
			        dataType:"json",
			        success:function(data){
			            if (data.isOk){
			                if (data.code){
			                    $("input[name='authcode']").val(data.code);
			                }
			            }else{
			                layer.msg(data.msg);
			            }

			        }
			    })
			})
		})
	</script>


</body>
</html>